<template>
  <el-form label-position="top" :rules="rules" ref="form" :model="form" class="padding-b" @submit.native.prevent>
    <el-form-item :label="label" prop="value">
      <el-input
        size="mini"
        v-model="form.value"
        :disabled="disabled"
        :placeholder="placeholder"
        autoComplete="on"
        :name="'input' + id"
        @blur="blur"
      ></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
//  import {checkform} from '@/utils/validate.js'
import { checkHideTel } from '@/utils/m7Utils'
import { trim } from 'lodash'
export default {
  name: 'BInput',
  props: {
    label: String,
    default: { type: String, default: '' },
    id: String,
    disabled: { type: String | Boolean, default: false },
    placeholder: { type: String, default: '' },
    require: String,
    field: {
      type: Object,
      default: () => {
        return {}
      }
    },
    random: { type: Number, default: 0 }
  },
  data() {
    let validate1 = (rule, value, callback) => {
      if (this.require === 'required' && !trim(value)) {
        callback(new Error(this.$t('validate.required')))
      } else {
        callback()
      }
    }
    return {
      form: {
        value: this.default
      },
      cacheValue: {},
      rules: {
        value: [
          {
            validator: validate1,
            required: this.require === 'required',
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    random: {
      deep: true,
      handler: function (newV, oldV) {
        let value = this.form.value
        let self = this
        if (this.require === 'required') {
          this.$refs.form.validate((valid) => {
            if (valid) {
            } else {
              value = false
            }
          })
        }
        self.$emit('tellme', { [self.id]: value })
      }
    }
  },
  methods: {
    submit(noCheck) {
      // noCheck为true 不进行校验
      let obj = {}
      if (noCheck) {
        obj.success = true
      } else {
        this.$refs.form.validate((valid) => {
          obj.success = valid
        })
      }
      if (obj.success) {
        // 如果缓存了真实号码，就用真实号码
        let value = this.cacheValue[this.form.value] || this.form.value
        obj.data = { [this.id]: trim(value) }
      }
      return obj
    },
    blur() {
      this.$emit('blurEvent', this.submit(true))
    },
    resetForm() {
      this.form.value = ''
    }
  },
  mounted() {
    if (this.field.relevance === 'stable_phone') {
      // 工单关联客户联系方式，如果隐藏号码，显示隐藏号码
      let phone = checkHideTel(this.form.value || '', this.$store.state.session.user)
      if (phone) {
        this.cacheValue[phone] = this.form.value
        this.form.value = phone
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl";
.padding-b
  padding-bottom $padding5
</style>
